<template>
  <div class="pui-toolbar">
    <div class="pui-toolbar_container">
      <div class="pui-toolbar_block" v-for="(block, bi) in toolbarList" :key="bi">
        <div class="pui-toolbar_block-content" v-if="!block.type || (block.type && block.type !== 'text-mode')">
          <div
            :class="['pui-toolbar_list', componentRef.type !== 'mini' ? option.display : 'column']"
            v-for="(option, oi) in block.options"
          >
            <div
              :class="[
                'pui-toolbar_item',
                option.display,
                componentRef.currentIndex === bi + '-' + oi + '-' + idx && 'active-item',
                block.type && block.type === 'input' && 'no-hover',
                (!block.type || (block.type && block.type !== 'input')) && 'hover',
              ]"
              v-for="(item, idx) in option.list"
              :key="idx"
            >
              <div :class="['item', item.display]">
                <div
                  :class="['pui-toolbar_item_label', item.display, 'pui-toolbar_item_input']"
                  v-if="block.type === 'input' && option.type !== 'tool'"
                >
                  <span class="label" v-if="item.type !== 'btn' && item.type !== 'switch'" :style="{ width: item.labelWidth }">
                    {{ item.label }}
                  </span>
                  <input
                    :disabled="item.disabled"
                    :readonly="item.readonly"
                    class="pui-input"
                    type="number"
                    v-model="item.value"
                    @input="(item.onInput && item.onInput($event, item.prop)) || onInputHandle($event, item)"
                    v-if="item.type === 'number'"
                    :min="item.min"
                    :max="item.max"
                  />
                  <input
                    :disabled="item.disabled"
                    :readonly="item.readonly"
                    class="pui-input"
                    type="text"
                    v-model="item.value"
                    @input="item.onInput && item.onInput($event, item.prop)"
                    v-if="item.type === 'text'"
                  />
                  <div class="btn-list" v-if="item.type === 'btn'">
                    <pui-button
                      :key="btnIdx"
                      v-for="(btn, btnIdx) in item.btnList"
                      :type="btn.btnType || 'default'"
                      @click="btn.onClick($event)"
                    >
                      {{ btn.label }}
                    </pui-button>
                  </div>
                  <div class="btn-list" v-if="item.type === 'switch'">
                    <pui-switch
                      :key="btnIdx"
                      v-for="(btn, btnIdx) in item.btnList"
                      v-model="btn.value"
                      :disabled="btn.disabled"
                      :activeLabel="btn.activeLabel"
                      :inactiveLabel="btn.inactiveLabel"
                      :activeColor="btn.activeColor"
                      :inactiveColor="btn.inactiveColor"
                      :size="btn.size"
                      @onChange="btn.onChange($event, btn.prop)"
                    >
                    </pui-switch>
                  </div>
                </div>
                <div
                  :class="['pui-toolbar_item_label', item.display]"
                  @click="item.fn && item.fn()"
                  v-else-if="block.type === 'input' && option.type === 'tool'"
                >
                  <pui-svg :size="componentRef.type !== 'mini' ? option?.size : 'small'" :name="item.icon" v-if="item?.icon"></pui-svg>
                  <span
                    class="label"
                    v-if="
                      (item.display === 'column' && option.list.length < 3 && !componentRef.showText) ||
                      componentRef.showText ||
                      (componentRef.type !== 'mini' && item.display === 'column')
                    "
                    >{{ item.label }}
                  </span>
                </div>
                <div :class="['pui-toolbar_item_label', item.display]" @click="item.fn && item.fn()" v-else>
                  <pui-svg :size="componentRef.type !== 'mini' ? option?.size : 'small'" :name="item.icon" v-if="item?.icon"></pui-svg>
                  <span
                    class="label"
                    v-if="
                      (item.display === 'column' && option.list.length < 3 && !componentRef.showText) ||
                      componentRef.showText ||
                      (componentRef.type !== 'mini' && item.display === 'column')
                    "
                    >{{ item.label }}
                  </span>
                </div>
                <pui-popper
                  v-if="typeof item.dataList !== 'undefined'"
                  theme="light"
                  @onClose="clickOutsideHandle"
                  @onOpen="toggleOpen(bi, oi, idx)"
                  :placement="placement"
                  :disabled="disabled"
                >
                  <div class="arrow_icon">
                    <pui-svg class="pui-toolbar_item_arrow" name="triangle-down"></pui-svg>
                  </div>
                  <template #popper>
                    <div class="pui-selector-content">
                      <div class="pui-selector-content_list">
                        <div
                          :class="['pui-selector-content_item', ditem.border && 'border']"
                          v-for="ditem in item.dataList"
                          :key="ditem?.value"
                          @click.stop="ditem.fn()"
                        >
                          <pui-svg class="content-icon" size="mini" :name="ditem?.icon" v-if="ditem?.icon"></pui-svg>
                          <div class="content-label">{{ ditem?.label }}</div>
                        </div>
                      </div>
                    </div>
                  </template>
                </pui-popper>
              </div>
            </div>
          </div>
          <div class="pui-toolbar_block-title">{{ block.title }}</div>
        </div>
        <div class="pui-toolbar_block-content" v-else>
          <div class="text-mode">
            <div class="_left">
              <div class="item" @click="block.options[0].list[0].fn()">
                <pui-svg size="large" name="add-text"></pui-svg>
                <span class="label">添加<br />文本</span>
              </div>
            </div>
            <div class="_right">
              <div class="_top">
                <pui-selector
                  @onChange="block.options[1].list[0].fn"
                  class="font-family"
                  :dataList="textRef.fontFamily"
                  v-model="textRef.selectedFontFamily"
                >
                </pui-selector>
                <pui-selector
                  @onChange="block.options[1].list[1].fn"
                  class="font-size"
                  :dataList="textRef.fontSize"
                  v-model="textRef.selectedFontSize"
                >
                </pui-selector>
              </div>
              <div class="_bottom">
                <div class="item" @click="block.options[2].list[0].fn()">
                  <pui-svg name="text-left"></pui-svg>
                </div>
                <div class="item" @click="block.options[2].list[1].fn()">
                  <pui-svg name="text-center"></pui-svg>
                </div>
                <div class="item" @click="block.options[2].list[2].fn()">
                  <pui-svg name="text-right"></pui-svg>
                </div>
                <div class="item" @click="block.options[2].list[3].fn()">
                  <pui-svg name="text-background-color"></pui-svg>
                </div>
                <div class="item" @click="block.options[2].list[4].fn()">
                  <pui-svg name="text-color"></pui-svg>
                </div>
              </div>
            </div>
            <div class="pui-toolbar_block-title">{{ block.title }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
  name: 'pui-toolbar',
});
</script>

<script setup lang="ts">
import { reactive, onMounted } from 'vue';
import type { Props } from './interface';

withDefaults(defineProps<Props>(), {
  toolbarList: [],
  dataList: [],
  placement: 'bottom',
  disabled: false,
});

const emits = defineEmits<{
  'onInputHandle': [val: any];
}>();

const componentRef = reactive({
  isShow: false,
  showText: false,
  type: 'normal',
  currentIndex: '',
});

const textRef = reactive({
  fontFamily: [
    {
      label: '微软雅黑',
      value: 'Microsoft YaHei',
    },
    {
      label: '宋体',
      value: '宋体',
    },
  ],
  selectedFontFamily: 'Microsoft YaHei',
  fontSize: [
    {
      label: '12',
      value: '12',
    },
    {
      label: '14',
      value: '14',
    },
    {
      label: '16',
      value: '16',
    },
    {
      label: '18',
      value: '18',
    },
  ],
  selectedFontSize: '12',
});

const resize = (width: any) => {
  if (width < 1600 && width > 1400) {
    componentRef.showText = false;
    componentRef.type = 'normal';
  } else if (width <= 1400) {
    componentRef.showText = false;
    componentRef.type = 'mini';
  } else {
    componentRef.showText = true;
    componentRef.type = 'normal';
  }
};

const toggleOpen = (idx1: number, idx2: number, idx3: number) => {
  componentRef.currentIndex = idx1 + '-' + idx2 + '-' + idx3;
  componentRef.isShow = !componentRef.isShow;
};

const clickOutsideHandle = () => {
  componentRef.isShow = false;
  componentRef.currentIndex = '';
};

const onInputHandle = ($event: any, data: any) => {
  const emitData = {
    prop: data.prop,
    value: data.type === 'number' ? $event.target.valueAsNumber : $event.target.value,
  };
  emits('onInputHandle', emitData);
};

onMounted(() => {
  resize(window.document.documentElement.clientWidth);
  window.addEventListener('resize', (e) => {
    const ele = e.target as Window;
    resize(ele.innerWidth);
  });
});
</script>
